import React from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useMount } from 'ahooks'
import './index.less'
import { IAdminLogin } from '@/services/admin';
import { connect, ConnectRC } from 'umi'
interface PageProps {

}
const Login: ConnectRC<PageProps> = ( { dispatch } ) => {
  // console.log(props)
  const onFinish = (values: IAdminLogin) => {
    console.log('Received values of form: ', values);
    // 可以直接dispatch effects 也可以直接 dispatch reducers
    dispatch({
      type: 'admin/loginReq',
      payload: values
    })
  };
  // js控制容器的高度
  useMount(() => {
    // 获取屏幕的高度
    let height: number = document.documentElement.offsetHeight
    console.log(height)
    // 修改样式
    let login_container: any = document.querySelector('.login_container')
    login_container.style.height = height + 'px'
  })
  return (
    <div className="login_container">
      <h1 className="login_title">嗨购后台管理系统</h1>
      <Form
        name="normal_login"
        className="login-form"
        onFinish={onFinish}
      >
        <Form.Item
          name="adminname"
          rules={[
            {
              required: true,
              pattern: /^[a-zA-Z0-9_-]{4,16}$/,
              message: '请输入4-16位有效字符，包含字母，数字，下划线以及减号!',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员账号" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              len: 6,
              // pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
              message: '请输入6位字符的密码!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="管理员密码"
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default connect((state) => {
  console.log(state)
  return {}
})(Login)
